import { useState, createContext, useContext } from 'react';
import './App.css';

const CountContext = createContext(0)
function App() {
  console.log('render app');

  const [count, setCount] = useState(1);

  /**
   * createContext
   *  创建一个Context 对象。相当于时一个全局的大容器
   * 
   * * Context.Provider
   *  每个 Context 对象都会返回一个 Provider React 组件，它允许消费组件订阅 context 的变化。
   * 
   * useContext
   *  接受一个 context 对象 (React.createContext 的返回值) 返回订阅context 的变化。
   * 
   * Context.Consumer
   *  其他组件中想要使用在 context 中提供的值。使用 .Consumer
   */
  
  return (
    <>
      <div className='card'>
        <h1>createContext 和 useContext 使用方法</h1>
        <span style={{ marginRight: 20 }}>count is {count}</span>
        <br />
        <button onClick={() => setCount(count => count + 1)}>修改Count</button>
        <br />
        
        <CountContext.Provider value={count}>
          <Son />
          <Child />
        </CountContext.Provider>
      </div>
    </>
  );
}

const Son = () => {
  console.log('render son');
  const count = useContext(CountContext)
  return (
    <div>
      <p>son count is {count}</p>
    </div>
  )
}

/**
 * 其他组件中想要使用在 context 中提供的值。使用 .Consumer
 * useContextt只能在函数式组件中使用
 * Consumer 里是函数，函数的参数是value
 * useContext 就相当于 CountContext.Consumer 的简写
 * 用来订阅指定的 CountContext 对象
 * 
 */
const Child = () => {
  console.log('render children');
  return (
    <div>
      <CountContext.Consumer>
        {count => <div>第二个组件收到的值： {count}</div>}
      </CountContext.Consumer>
    </div>
  )
}

export default App;
